<!-- 水位图和进度池配置 -->
<template>
  <div>
    <el-form-item label="透明度">
      <el-slider v-model="main.activeOption.opacity"></el-slider>
    </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="进度池配置" v-if="main.activeOption.is==='dv-percent-pond'">
        <el-form-item label="配色">
          <l-input-color v-model="main.activeOption.colors[0]"></l-input-color>
          <l-input-color v-model="main.activeOption.colors[1]"></l-input-color>
        </el-form-item>
        <el-form-item label="边框宽度">
          <el-input-number
            v-model="main.activeOption.borderWidth"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="边框间隙">
          <el-input-number
            v-model="main.activeOption.borderGap"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="线条间隙">
          <el-input-number v-model="main.activeOption.lineDash[0]" controls-position="right" style="width:50%">
          </el-input-number>
          <el-input-number v-model="main.activeOption.lineDash[1]" controls-position="right" style="width:50%">
          </el-input-number>
        </el-form-item>
        <el-form-item label="文字颜色">
          <l-input-color v-model="main.activeOption.textColor"></l-input-color>
        </el-form-item>
        <el-form-item label="边框半径">
          <el-input-number
            v-model="main.activeOption.borderRadius"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="局部渐变">
          <el-switch v-model="main.activeOption.localGradient"></el-switch>
        </el-form-item>
        <el-form-item label="信息格式化">
          <el-input v-model="main.activeOption.formatter"></el-input>
        </el-form-item>
      </el-collapse-item>

      <el-collapse-item title="水位图配置" v-else>
        <el-form-item label="形状">
          <el-select v-model="main.activeOption.shape" filterable allow-create default-first-option placeholder="key值">
            <el-option
              v-for="item in shapeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配色">
          <l-input-color v-model="main.activeOption.colors[0]"></l-input-color>
          <l-input-color v-model="main.activeOption.colors[1]"></l-input-color>
        </el-form-item>
        <el-form-item label="波浪数量">
          <el-input-number
            v-model="main.activeOption.waveNum" controls-position="right">
          </el-input-number>
        </el-form-item>
        <el-form-item label="波浪高度">
          <el-input-number
            v-model="main.activeOption.waveHeight" controls-position="right">
          </el-input-number>
        </el-form-item>
        <el-form-item label="波浪透明度">
          <el-slider
            v-model="main.activeOption.waveOpacity" :min="0" :max="1" :step="0.1">
          </el-slider>
        </el-form-item>
        <el-form-item label="信息格式化">
          <el-input v-model="main.activeOption.formatter"></el-input>
        </el-form-item>
      </el-collapse-item>
     
      <el-collapse-item title="动画设置">
        <el-form-item label="缩放">
          <el-slider v-model="main.activeOption.scale" :min="1" :max="10"></el-slider>
        </el-form-item>
        <el-form-item label="X旋转度">
          <el-slider v-model="main.activeOption.rotateX" :min="min" :max="max"></el-slider>
        </el-form-item>
        <el-form-item label="Y旋转度">
          <el-slider v-model="main.activeOption.rotateY" :min="min" :max="max"></el-slider>
        </el-form-item>
        <el-form-item label="Z旋转度">
          <el-slider v-model="main.activeOption.rotateZ" :min="min" :max="max"></el-slider>
        </el-form-item>
        <el-form-item label="进入动画">
          <l-select 
              :options="animateOptions" 
              v-model="main.activeOption.animateValue"
              @change="handleChangeAnimate" >
            </l-select>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>

    
  </div>
</template>

<script>
export default {
  inject: ["main"],
  data () {
    return {
      min: -360,
      max: 360,
      animateOptions: [
        {label: '弹跳', value: 'bounce'},
        {label: '放大缩小弹簧', value: 'bounceIn'},
        {label: '向下长距进入', value: 'fadeInDownBig'},
        {label: '向右长距进入', value: 'fadeInLeftBig'},
        {label: '向左长距进入', value: 'fadeInRightBig'},
        {label: '向上长距进入', value: 'fadeInUpBig'},
        {label: 'Y轴旋转', value: 'flip'},
        {label: '中心X轴旋转', value: 'flipInX'},
        {label: '中心Y轴旋转', value: 'flipInY'},
      ],
      shapeOptions: [
      {label: '矩形', value: 'rect'},
      {label: '圆形', value: 'round'},
      {label: '圆角矩形', value: 'roundRect'},
        
      ]
    }
  },
  methods: {
     handleChangeAnimate(val) {
      if (val) {
        this.$set(this.main.activeOption, 'animateValue', val.value)
      } else {
        this.$set(this.main.activeOption, 'animateValue', '')
      }
    }
  }
}
</script>

<style>
</style>